<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />		
		<title>Document</title>
		<script src="../js/vue.js"></script>
		<style>
			/* 定义提示框的基础样式 */
			.message {
				display: inline-block;
				width: 160px;
				height: 24px;
				border: 1px solid #555;
				text-align: center;
				line-height: 24px;				
			}

			/* 定义提示框在验证通过时的样式 */
			.success {
				border: 1px solid green;
				background-color: lightgreen;
				color: green;
			}

			/* 定义提示框在验证失败时的样式 */
			.fail {
				border: 1px solid red;
				background-color: pink;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 因为要获得用户输入的手机号进行验证，所有必须用双向绑定 -->
			<input type="text" v-model="cellphone" />			
			<!-- 提示框的样式会变化，部分class需要属性绑定-->
			<!-- 提示框的内容会变化，需要{{}}绑定 -->
			<span class="message" :class="isRight ?'success':'fail'">{{isRight ?"手机号可用":"手机号格式错误！"}}</span>
			<!--样式和内容，都和验证结果这一个数据有关！所有，其实只用一个变量就可控制了-->
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					//因为页面中需要三个变量，所以data中就要有三个变量
					cellphone: "12968290221", //实时接用户在文本框中输入的手机号					
				},				
				computed:{
					isRight(){
						//定义正则验证cellphone的内容
						var reg = /^1[3-9]\d{9}$/;
						//如果用正则验证cellphone的内容通过
						return reg.test(this.cellphone);
					},
				},	
			});
		</script>
	</body>
</html>
